<template>
	<view class="page">
		<u-navbar title="我的" bgColor="#c30d23" :titleStyle="titleStyle" safeAreaInsetTop placeholder>
		<view slot="left"></view>
		</u-navbar>
		<view class="headerBox">
			<view class="headerImgBox">
				<view class="hh f-between-center">
					<view class="f-start-center">
						<image :src="userInfo.avatar|| '../../static/personal/defaultPhoto.png'" mode="">
						</image>
						<view class="c-center-start">
							<text>{{userInfo.nickName}}</text>
							<text class="bold">{{userInfo.userName}}</text>
						</view>
					</view>
					<view class="c-start-center">
						<view class="">
							<text>资金账户</text>
							<text :class="['green',{red:capitalInfo.state!==0}]">
							{{capitalInfo.stateStr}}</text>
						</view>
						<text class="bold">{{capitalInfo.fundAccount}}</text>
					</view>
				</view>
				<view class="hc">
					<view class="">
						<view class="hui">余额</view>
						<text class="bold">{{capitalInfo.openingBalance}}</text>
					</view>
					<view class="">
						<view class="hui">预扣</view>
						<text class="bold">0.00</text>
					</view>
					<view class="">
						<view class="hui">可用</view>
						<text class="bold">{{capitalInfo.availableBalance}}</text>
					</view>
					<view class="">
						<view class="hui">净值</view>
						<text class="bold">{{capitalInfo.netWorth}}</text>
					</view>
					<view class="">
						<view class="hui">占用</view>
						<text class="bold">{{capitalInfo.occupyBalance}}</text>
					</view>
					<view class="">
						<view class="hui">风险率</view>
						<text class="bold green">{{risk}}%</text>
					</view>
				</view>
				<view class="hf">
					<view class="rj ">
						入金
					</view>
					<view class="cj ">
						出金
					</view>
				</view>
			</view>
		</view>
		<view class="contentBox">
			<view class="content f-between-center">
				<view class="c-between-center" @click="toTrouble">
					<image src="/static/personal/chicang.png" mode=""></image>
					<text>我的持仓</text>
				</view>
				<view class="c-between-center" @click="toSiteTion">
					<image src="/static/personal/dingdan.png" mode=""></image>
					<text>我的订单</text>
				</view>
				<view class="c-between-center" @click="toDeviceTion">
					<image src="/static/personal/package.png" mode=""></image>
					<text>交货提货</text>
				</view>
				<view class="c-between-center" @click="toCollect">
					<image style="width: 50rpx;height: 50rpx;" src="/static/personal/dd.png" mode="">
					</image>
					<text>履约信息</text>
				</view>
			</view>
		</view>
		<view class="" style="box-sizing: border-box;padding: 0 25rpx;">
			<view class="listBox">
				<u-cell-group>
					<u-cell icon="/static/personal/zijinxinxi.png" 
					titleStyle="font-size: 26rpx;"
					:iconStyle="iconStyle" title="资金信息" :isLink="true"
						url="/pages/home/capitalInfo/index"></u-cell>
					<view class="lineBox">
						<u-line></u-line>
					</view>
					<u-cell icon="/static/personal/tourupin.png"
					 titleStyle="font-size: 26rpx;"
					 :iconStyle="iconStyle" title="实名认证" :isLink="true"
						url="/pagesFarm/pages/farmInputManage"></u-cell>
					<view class="lineBox">
						<u-line></u-line>
					</view>
					<u-cell icon="/static/personal/gerenxinxi.png" 
					titleStyle="font-size: 26rpx;"
					:iconStyle="iconStyle" title="个人信息" :isLink="true"
						url="/pagesPersonal/pages/financeManage"></u-cell>
					<view class="lineBox">
						<u-line></u-line>
					</view>
					<u-cell icon="/static/personal/MIMA.png" 
					titleStyle="font-size: 26rpx;"
					:iconStyle="iconStyle" title="用户注册协议" :isLink="true"
						url="/pagesPersonal/pages/changePwd"></u-cell>
					<view class="lineBox">
						<u-line></u-line>
					</view>
					<u-cell class="celll" icon="/static/personal/tuichu.png" 
					titleStyle="font-size: 26rpx;"
					:iconStyle="iconStyle" title="关于隐私"
						:isLink="true" @click="nokaifa"></u-cell>
					<view class="lineBox">
						<u-line></u-line>
					</view>
					<u-cell class="celll" icon="/static/personal/kefu.png" 
					titleStyle="font-size: 26rpx;"
					:iconStyle="iconStyle" title="服务热线" :isLink="true"
						@click="nokaifa"></u-cell>
					<view class="lineBox">
						<u-line></u-line>
					</view>
					<u-cell class="celll" icon="/static/personal/setting.png"
					 titleStyle="font-size: 26rpx;"
					 :iconStyle="iconStyle" title="设置"
						:isLink="true" @click="nokaifa"></u-cell>
					<view class="lineBox">
						<u-line></u-line>
					</view>
					<u-cell class="celll" icon="/static/personal/aboutWe.png"
					 titleStyle="font-size: 26rpx;"
					 :iconStyle="iconStyle" title="关于我们" :isLink="true" @click="nokaifa"></u-cell>
				</u-cell-group>
			</view>
		</view>
		<view class="loginOutBox">
			<view class="loginOut fcc" @click="exitLogin">
				退出登录
			</view>
		</view>

		<u-popup :show="isShow" mode="center" @close="isShow = false" round="50rpx">
			<view class="viewPop">
				<text style="padding-top: 80rpx;padding-bottom: 49rpx;">确定退出该账号吗？</text>
				<u-line width="100%" color="#F1F1F1"></u-line>
				<view class="viewPop__bottom">
					<view class="viewPop__bottom__cancel" @click="isShow = false">取消</view>
					<u-line color="#F1F1F1" length="calc(100% - 36rpx)" direction="col" margin="18rpx 0rpx"></u-line>
					<view class="viewPop__bottom__confirm" @click="confirmDel">确认</view>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import { getUserInfo,getUserCapital,getRisk } from '@/api/home'
	export default {
		data() {
			return {
				userInfo:{},
				capitalInfo:{},
				risk:0,
				titleStyle: {
					color: "#ffffff",
					fontSize: "36rpx",
					fontWeight: '400'
				},
				iconStyle: {
					width: '42rpx',
					height: '42rpx',
					marginRight:'20rpx',
				},
				isShow: false,
			}
		},
		onShow() {
			this.getData()
		},
		methods: {
			async getData(){
				const res = await getUserInfo()
				if(res.data.user) {
					this.userInfo = res.data.user
					this.$store.commit('setUserInfo',res.data.user)
					this.getCapital()
					this.getRisk()
				}
			},
			async getCapital(){ // 获取资金
				const res = await getUserCapital({
					userName:this.userInfo.userName,
				})
				if(res.rows) {
					this.capitalInfo = res.rows[0]
				}
			},
			async getRisk(){ // 获取风险率
				const res = await getRisk()
				if(res.data) {
					this.risk = res.data.toFixed(2)
				}
			},
			nokaifa() {
				this.$u.toast('开发中，敬请期待')
			},
			// 提问、评论
			toTrouble() {
				uni.navigateTo({
					url: '/pages/home/chicang'
				})
			},
			exitLogin() {
				this.isShow = true
			},
			confirmDel() {
				this.isShow = false
				uni.removeStorageSync('token')
				uni.reLaunch({
					url: '/pages/login/login'
				})
			},
			// 我的收藏
			toCollect() {
				uni.navigateTo({
					url: '/pages/home/lvyue'
				})
			},
			//  地块管理
			toSiteTion() {
				uni.navigateTo({
					url: '/pages/home/myOrder/myOrder'
				})
			},
			// 设备管理
			toDeviceTion() {
				uni.navigateTo({
					url: '/pages/home/jiaohuo'
				})
			}

		}
	}
</script>
<style lang="scss">
	/deep/.u-cell__body {
		padding: 20rpx 36rpx !important;
	}

	/deep/.u-cell .u-line {
		display: none !important;
	}

	/deep/.u-cell-group__wrapper .u-line:first-child {
		display: none;
	}

	.lineBox .u-line {
		display: block !important;
	}
</style>
<style lang="scss" scoped>
	.loginOutBox {
		padding: 30rpx;
		.loginOut {
			width: 60%;
			height: 70rpx;
			line-height: 70rpx;
			text-align: center;
			margin: auto;
			border-radius: 40rpx;
			color: #fff;
			background-color: #C30D23;
			font-size: 28rpx;
		}
	}

	.page {
		position: relative;
		display: flex;
		flex-direction: column;
		height: 100%;
		min-height: 100vh;
		.headerBox {
			box-sizing: border-box;
			padding: 0 20rpx;
			background: linear-gradient(to bottom,#c30d23 50%,#ffffff 50%);
			.headerImgBox {
				width: 92%;
				margin: auto;
				height: 100%;
				padding: 15rpx;
				background: #FFFFFF;
				border-radius: 20rpx;
				color: #a1b1c5;
				font-size: 26rpx;
				.hh {
					width: 100%;
					height: 100rpx;
					image {
						width: 80rpx;
						height: 80rpx;
						margin-right: 20rpx;
					}
				}
				.hc {
					margin: 30rpx 0px;
					padding: 0px 20rpx;
					display: grid;
					grid-template-columns: repeat(3,1fr);
					grid-gap: 20rpx;
					&>view {
						
					}
						
				}
				.hf {
					width: 100%;
					height: 92rpx;
					padding: 0px 10rpx;
					margin-top: 20rpx;
					box-sizing: border-box;
					display: flex;
					justify-content: space-around;
					align-items: center;
					.rj,.cj {
						width: 45%;
						background: #c30d23;
						height: 65rpx;
						line-height: 65rpx;
						text-align: center;
						border-radius: 40rpx;
						color: #FFFFFF;
					}
					.cj {
						background: #fff;
						color: #000;
						box-shadow: 0rpx 0rpx 10rpx 0rpx #ccc;
					}
				}

				
				view {
					.bold {
						font-size: 30rpx;
						color: #000000;
						font-weight: bold;
					}
				}
			}
		}
		
		.green {
			color: #46d63c !important;
			margin-left:15rpx ;
		}
		.red {
			color: #c30d23 !important;
		}

		.contentBox {
			box-sizing: border-box;
			padding: 0 20rpx;
			margin: 20rpx 0px;
			.content {
				width: 100%;
				box-sizing: border-box;
				background: #FFFFFF;
				box-shadow: 0rpx 4rpx 12rpx 0rpx rgba(160, 160, 160, 0.1);
				padding: 20rpx;
				border-radius: 5px;
				image {
					width: 56rpx;
					height: 56rpx;
				}
				text {
					margin-top: 5rpx;
					color: #000;
					font-size: 26rpx;
				}
			}
		}

		.listBox {
			background: #FFFFFF;
			border-radius: 5px;
			padding: 10rpx 0rpx;
			.lineBox {
				width: 100%;
				height: 1rpx;
				box-sizing: border-box;
				padding: 0rpx 30rpx;
			}
		}

		.viewPop {
			background: #FFFFFF;
			border-radius: 50rpx;
			font-size: 30rpx;
			font-family: Source Han Sans CN;
			font-weight: 500;
			color: #000000;
			width: 471rpx;
			height: 260rpx;
			background: #FFFFFF;
			border-radius: 50rpx;
			position: relative;
			display: flex;
			flex-direction: column;
			// justify-content: space-between;
			align-items: center;

			&__bottom {
				display: flex;
				flex-direction: row;
				width: 100%;
				height: 110rpx;

				&__cancel {
					font-size: 28rpx;
					font-family: Source Han Sans CN;
					font-weight: 400;
					color: #999999;
					flex: 1;
					display: flex;
					align-items: center;
					justify-content: center;
				}


				&__confirm {
					font-size: 28rpx;
					font-family: Source Han Sans CN;
					font-weight: 400;
					color: #26C092;
					flex: 1;
					display: flex;
					align-items: center;
					justify-content: center;
				}
			}
		}

	}
</style>